<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: 00
 * @Date: 2020-09-04 10:43:11
 * @LastEditors: 000
 * @LastEditTime: 2020-09-06 21:28:17
-->
<template>
<!--科普-->
  <div class="record">
    <!--搜索导航-->
    <div class="top">
      <van-search v-model="value"  placeholder="请输入需要搜索的内容" />
    </div>
    <!--tab切换-->
    <div class="tab">
      <van-tabs v-model="active">
        <van-tab title="热点">
          <!--轮播图-->
          <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(image, index) in images" :key="index">
              <img :src="image" />
            </van-swipe-item>
          </van-swipe>
          <!--模拟数据-->
          <ul class="main">
            <li v-for="(item,index) in list" :key="index">
                <img :src="item.image" alt=""/>
                <div>
                  <p>{{item.title}}</p>
                  <span>{{item.time}}</span>
                  <span><van-icon name="eye" />{{item.read}}</span>
                  <span><van-icon name="like" />{{item.love}}</span>
                </div>
            </li>
          </ul>
        </van-tab>
        <van-tab title="话题">话题</van-tab>
        <van-tab title="生活">生活</van-tab>
        <van-tab title="睡眠">睡眠</van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data(){
    return{
      list:[],
      value: '',
      active: 0,
      images:[
        'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1546282999,3123713982&fm=26&gp=0.jpg',
        'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3837042561,1586344450&fm=26&gp=0.jpg',
        'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2952601288,2217868174&fm=26&gp=0.jpg',
        'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=366133008,2903261780&fm=26&gp=0.jpg',
        'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2762137787,2046339435&fm=26&gp=0.jpg'
      ]
    }
  },
  created(){
    axios.get('/getList').then(res=>{
      this.list=res.data.list
      console.log(res.data.list)
    })
  },
  mounted(){
    document.querySelector('.tab').onscroll=(e)=>{
      let top = e.target.scrollTop;
      if(top>55){
        document.querySelector('.van-tabs__wrap').style="position:fixed;top:100px;left:0;z-index:1000;width:100%";
      }else{
        document.querySelector('.van-tabs__wrap').style="position:static";
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.record {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 10px;
}
.top {
  width: 100%;
  height: 55px;
  align-items: center;
  justify-content: space-around;
  display: flex;
  .van-search {
    width: 95%;
    padding: 1px 4px;
    border: 1px solid #000;
    border-radius: 12px;
    background: #f7f8fa;
  }
}
.tab{
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .van-tabs{
    width: 100%;
    height: 100%;
    font-size: 14px;
    margin-top: -5px;
    .van-swipe{
      width: 100%;
      height: 170px;
      img{
        width: 100%;
        height: 100%;
        }
      } 
  }
}
.main{
  width: 100%;
  height: 100%;
  overflow: auto;
  margin-top: 10px;
  li{
    display: flex;
    justify-content: space-around;
    font-size: 14px;
    margin-top: 10px;
    p{
      margin-bottom: 30px;
    }
    span{
      margin-right: 8px;
      .van-icon{
        color: coral;
        top: 2px;
      }
    }    
  }
  img{
    width: 80px;
    height: 80px;
  }

}
</style>